Web Serial API: Överbryggar klyftan mellan webbläsare och hårdvaruenheter

Web Serial API är en revolutionerande teknik som ger webbutvecklare möjlighet att interagera direkt med seriella enheter inifrån en webbläsare. Detta öppnar upp en enorm mängd möjligheter, från att styra robotar och inbyggda system till att samla in sensordata och bygga interaktiva fysiska upplevelser. Denna guide ger en omfattande översikt över Web Serial API, dess kapabiliteter och hur man implementerar det i sina projekt, riktad till en global publik av utvecklare och entusiaster.

Vad är Web Serial API?

Web Serial API låter webbapplikationer kommunicera med seriella enheter, såsom mikrokontroller, Arduino-kort, 3D-skrivare och annan hårdvara, direkt från webbläsaren. Detta uppnås genom den seriella porten, ett standardgränssnitt för datakommunikation. Till skillnad från tidigare metoder som krävde insticksprogram eller inbyggda applikationer, erbjuder Web Serial API ett säkert och standardiserat sätt att interagera med hårdvara.

Nyckelfunktioner:

• Säker åtkomst: Kräver uttryckligt användartillstånd för att komma åt en specifik enhet, vilket ökar säkerheten.
• Plattformsoberoende kompatibilitet: Fungerar över olika operativsystem, inklusive Windows, macOS, Linux och ChromeOS, vilket ger en konsekvent upplevelse.
• Standardiserat API: Erbjuder ett konsekvent och lättanvänt JavaScript-API för att interagera med seriella enheter.
• Dataströmning: Stöder dataströmning i realtid, vilket möjliggör live-datavisualisering och interaktion.
• Dubbelriktad kommunikation: Underlättar sändning och mottagning av data mellan webbapplikationen och hårdvaruenheten.

Fördelar med att använda Web Serial API

Web Serial API erbjuder många fördelar för utvecklare, inklusive:

• Förenklad utveckling: Eliminerar behovet av plattformsspecifika insticksprogram eller utveckling av inbyggda applikationer, vilket förenklar utvecklingsprocessen.
• Förbättrad tillgänglighet: Gör hårdvaruinteraktion mer tillgänglig för en bredare publik, eftersom användare kan styra enheter direkt från sina webbläsare.
• Förbättrad användarupplevelse: Ger en smidigare och mer intuitiv användarupplevelse, eftersom användare kan interagera med hårdvara utan att installera ytterligare programvara.
• Ökad interaktivitet: Möjliggör skapandet av mycket interaktiva webbapplikationer som integreras med den fysiska världen.
• Global räckvidd: Webbapplikationer byggda med Web Serial API kan nås från vilken enhet som helst med en webbläsare och internetanslutning, vilket underlättar världsomspännande samarbete och innovation.

Användningsfall och exempel

Web Serial API kan tillämpas på en mängd olika projekt och applikationer, inklusive:

• Sakernas internet (IoT): Ansluta webbapplikationer till sensordata från mikrokontroller, skapa instrumentpaneler för miljöövervakning, styrning av smarta hem och industriell automation. Tänk på tillämpningar på olika platser som att övervaka temperaturen i ett växthus i Nederländerna eller spåra markfuktigheten på en gård i Kenya.
• Robotik och automation: Styrning av robotar, drönare och andra automatiserade system direkt från ett webbgränssnitt. Detta kan användas för utbildningsändamål (t.ex. robotprogrammering i en skola i Japan) eller industriell automation (t.ex. styrning av en tillverkningslinje i Tyskland).
• Styrning av 3D-utskrifter: Hantera och övervaka 3D-skrivare direkt från en webbläsare, vilket gör det möjligt för användare att ladda upp och styra utskriftsjobb på distans. Detta är särskilt användbart i distribuerad tillverkning och makerspaces, som man ser i länder som USA eller Indien.
• Datainsamling och visualisering: Samla in data från sensorer (t.ex. temperatur, tryck, ljus) och visa den i realtid på en webbaserad instrumentpanel. Detta har bred tillämpning, från vetenskaplig forskning i Kanada till jordbruksövervakning i Brasilien.
• Utbildningsprojekt: Undervisa studenter om elektronik, programmering och hårdvaruinteraktion. Enkelheten i Web Serial API gör det tillgängligt för studenter i alla åldrar och bakgrunder globalt.
• Interaktiva installationer: Skapa engagerande och interaktiva installationer som svarar på användarinmatning eller sensordata. Exempel inkluderar konstinstallationer eller museiutställningar, med hjälp av fysisk databehandling i länder som Australien.

Exempel: Styrning av ett Arduino-kort

Låt oss skapa ett enkelt exempel för att styra en LED ansluten till ett Arduino-kort. Vi kommer att använda JavaScript för att skicka kommandon till Arduino, och Arduino kommer att svara genom att tända eller släcka LED:en.

1. Arduino-kod (Arduino IDE):

            const int ledPin = 13;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(ledPin, HIGH);
      Serial.println("LED ON");
    } else if (command == '0') {
      digitalWrite(ledPin, LOW);
      Serial.println("LED OFF");
    }
  }
}
            

              
                Copy
              
            
          

Denna Arduino-kod:

• Ställer in LED-pinnen som utgång.
• Initierar seriell kommunikation med 9600 baud.
• Kontrollerar kontinuerligt efter inkommande seriell data.
• Om data tas emot, läser den tecknet.
• Om tecknet är '1', tänder den LED:en.
• Om tecknet är '0', släcker den LED:en.
• Skickar ett bekräftelsemeddelande tillbaka till den seriella porten.

2. HTML och JavaScript (Webbläsare):

            <!DOCTYPE html>
<html>
<head>
  <title>Web Serial LED-styrning</title>
</head>
<body>
  <button id="connectButton">Anslut till Arduino</button>
  <button id="onButton" disabled>Tänd LED</button>
  <button id="offButton" disabled>Släck LED</button>
  <p id="status">Frånkopplad</p>

  <script>
    const connectButton = document.getElementById('connectButton');
    const onButton = document.getElementById('onButton');
    const offButton = document.getElementById('offButton');
    const status = document.getElementById('status');
    let port;
    let writer;

    async function connect() {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        writer = port.writable.getWriter();
        status.textContent = 'Ansluten';
        connectButton.disabled = true;
        onButton.disabled = false;
        offButton.disabled = false;
      } catch (error) {
        status.textContent = 'Fel: ' + error.message;
      }
    }

    async function sendCommand(command) {
      try {
        const data = new TextEncoder().encode(command);
        await writer.write(data);
      } catch (error) {
        status.textContent = 'Fel vid sändning av kommando: ' + error.message;
      }
    }

    async function turnOn() {
      await sendCommand('1');
    }

    async function turnOff() {
      await sendCommand('0');
    }

    connectButton.addEventListener('click', connect);
    onButton.addEventListener('click', turnOn);
    offButton.addEventListener('click', turnOff);
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Förklaring av JavaScript-koden:

• Anslutningsknapp: När man klickar på den, begär den åtkomst till en seriell port och försöker öppna den.
• Tänd/Släck LED-knappar: Skickar kommandot "1" för att tända LED:en och "0" för att släcka den.
• Anslutningsstatus: Visar aktuell anslutningsstatus.
• `navigator.serial.requestPort()`: Uppmanar användaren att välja en seriell port.
• `port.open()`: Öppnar den valda seriella porten. Parametern `baudRate` är inställd för att matcha Arduino-koden (9600).
• `port.writable.getWriter()`: Skapar en skrivare för att skicka data till den seriella porten.
• `writer.write(data)`: Skriver data (kommandot) till den seriella porten.
• Felhantering: Inkluderar felhantering för att ge feedback till användaren.

Hur man kör exemplet:

1. Anslut Arduino: Anslut Arduino-kortet till din dator via USB.
2. Ladda upp Arduino-koden: Öppna Arduino IDE och ladda upp den medföljande koden till ditt Arduino-kort.
3. Skapa HTML-filen: Spara HTML-koden som en HTML-fil (t.ex. `index.html`).
4. Öppna HTML-filen i en webbläsare: Öppna `index.html`-filen i en webbläsare som stöder Web Serial API (t.ex. Chrome, Edge och vissa versioner av Opera).
5. Anslut och styr: Klicka på knappen "Anslut till Arduino". Din webbläsare kommer att be dig att välja en seriell port. Välj Arduino. Klicka sedan på knapparna "Tänd LED" och "Släck LED" för att styra LED:en.

Komma igång med Web Serial API

För att börja använda Web Serial API behöver du följande:

• En webbläsare som stöder Web Serial API: Stöds för närvarande av Chrome, Edge och vissa versioner av Opera. Kontrollera webbläsarkompatibilitet på resurser som Can I Use.
• En hårdvaruenhet: Såsom en Arduino, Raspberry Pi eller någon enhet som kommunicerar över en seriell port.
• Grundläggande kunskaper i HTML, CSS och JavaScript: Förtrogenhet med dessa webbteknologier är avgörande.

Steg-för-steg-guide:

1. Begär åtkomst till seriell port: Använd `navigator.serial.requestPort()` för att uppmana användaren att välja en seriell port. Denna funktion returnerar ett Promise som resulterar i ett `SerialPort`-objekt. Observera: användarinteraktion (ett knapptryck) krävs vanligtvis för att utlösa `requestPort()`.
2. Öppna den seriella porten: Anropa `port.open()`-metoden och skicka med ett konfigurationsobjekt som specificerar baud-hastighet och andra inställningar för seriell port (t.ex. dataBits, stopBits, parity). Baud-hastigheten måste matcha den hastighet som används av din hårdvaruenhet.
3. Hämta läs- och skrivbara strömmar: Använd egenskaperna `port.readable` och `port.writable` för att få de läs- och skrivbara strömmarna. Dessa strömmar används för att skicka och ta emot data.
4. Skapa en skrivare: Använd `port.writable.getWriter()`-metoden för att skapa ett `writer`-objekt, som du kommer att använda för att skicka data till enheten.
5. Skapa en läsare: Använd `port.readable.getReader()`-metoden för att skapa ett `reader`-objekt, som du kommer att använda för att ta emot data från enheten.
6. Skriv data till enheten: Använd `writer.write(data)` för att skicka data till den seriella porten. `data` bör vara en `ArrayBuffer` eller en `Uint8Array`. Du kan använda `TextEncoder` för att konvertera en sträng till en `Uint8Array`.
7. Läs data från enheten: Använd `reader.read()` för att läsa data från den seriella porten. Denna metod returnerar ett Promise som resulterar i ett objekt som innehåller data och en boolesk som indikerar om strömmen är stängd.
8. Stäng den seriella porten: När du är klar, anropa `writer.close()` och `reader.cancel()` för att stänga strömmarna, och anropa sedan `port.close()` för att stänga den seriella porten. Inkludera alltid felhantering för att hantera potentiella problem med seriell kommunikation.

Kodexempel och bästa praxis

Här är fler kodavsnitt och bästa praxis för att arbeta med Web Serial API:

1. Begära en seriell port:

            async function requestSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    return port;
  } catch (error) {
    console.error('Fel vid begäran av port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

2. Öppna och konfigurera den seriella porten:

            async function openSerialPort(port) {
  try {
    await port.open({
      baudRate: 115200, // Justera för att matcha din enhet
      dataBits: 8,
      stopBits: 1,
      parity: 'none',
    });
    return port;
  } catch (error) {
    console.error('Fel vid öppning av port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

3. Skriva data till den seriella porten (sträng):

            async function writeToSerialPort(port, data) {
  const encoder = new TextEncoder();
  const writer = port.writable.getWriter();
  try {
    await writer.write(encoder.encode(data));
  } catch (error) {
    console.error('Fel vid skrivning till port:', error);
  } finally {
    writer.releaseLock();
  }
}
            

              
                Copy
              
            
          

4. Läsa data från den seriella porten:

            async function readFromSerialPort(port, callback) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Strömmen stängd
        break;
      }
      if (value) {
        const decoder = new TextDecoder();
        const decodedValue = decoder.decode(value);
        callback(decodedValue);
      }
    }
  } catch (error) {
    console.error('Fel vid läsning från port:', error);
  } finally {
    reader.releaseLock();
  }
}
            

              
                Copy
              
            
          

5. Stänga den seriella porten:

            async function closeSerialPort(port) {
  if (port) {
    try {
      await port.close();
    } catch (error) {
      console.error('Fel vid stängning av port:', error);
    }
  }
}
            

              
                Copy
              
            
          

Bästa praxis:**

            async function startStreaming(port, dataCallback) {
  const reader = port.readable.getReader();
  let decoder = new TextDecoder();
  let buffer = '';

  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break; // Strömmen stängd
      }
      if (value) {
        buffer += decoder.decode(value);
        let newlineIndex = buffer.indexOf('\n'); // Eller '\r' eller liknande avslutare
        while (newlineIndex > -1) {
          const line = buffer.substring(0, newlineIndex);
          dataCallback(line); // Bearbeta den mottagna dataraden
          buffer = buffer.substring(newlineIndex + 1);
          newlineIndex = buffer.indexOf('\n');
        }
      }
    }
  } catch (error) {
    console.error('Fel under strömning:', error);
  } finally {
    reader.releaseLock();
  }
}

            

              
                Copy
              
            
          

            const port = await navigator.serial.requestPort({
  filters: [
    { usbVendorId: 0x2341, // Arduino Leverantörs-ID
      usbProductId: 0x0043 }, // Arduino Uno Produkt-ID
  ],
});
            

              
                Copy